<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Shopping</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--标准mui.css-->
		<link rel="stylesheet" href="../css/mui.min.css">
		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="../css/app.css"/>
		<link rel="stylesheet" type="text/css" href="../css/icons-extra.css">
		<!--自定义iconfont-->
		<link rel="stylesheet" type="text/css" href="../css/iconfont.css">
		<link rel="stylesheet" type="text/css" href="../css/iconfont2.css" />
		<script src="../js/mui.min.js"></script>
		<script src="../js/jquery.min.js"></script>
		<script type="text/javascript" src="../js/index.js" ></script>
		<script src="../js/appData.js"></script>
	</head>

	<body style="background: #fff;">
		
		<header class="mui-bar mui-bar-nav seach-header classification">
			<div class="top-sch-box flex-col">
				<div class="centerflex">
					<i class="fdj  icon  iconfont icon-sousuo1" style="margin-top: -15px;"></i>
					<input style="margin-top: 3px; background-color: #F8F8F8;" type="text" placeholder="请输入搜索内容" class="sch-txt" />
					<!--<span class="shaomiao"><i class="iconfont icon-saoma"></i></span>-->
				</div>
			</div>
			<!-- <a class="btn" href="new-newsCenter.html">
	            <span class="icon iconfont icon-xiaoxi"></span>
	        </a>
	        <a class="btn" href="new-shopping-card.html">
	            <span class="icon iconfont icon-gouwuche1"></span>
	        </a>-->

		</header>
	
		<div class="nav-bottom">
			<!--图片轮播-->
			<div id="slider" class="mui-slider" >
				<div class="mui-slider-group mui-slider-loop">
					<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
					<div class="mui-slider-item mui-slider-item-duplicate "><a class='gotoGoodsDetail' data-id="1" href="new-personal-details.html"><img src="../images/shop3_2.jpeg"></a></div>
					<div class="mui-slider-item "><a class='gotoGoodsDetail' data-id="4" href="new-personal-details.html"><img src="../images/shop5_2.jpeg"></a></div>
					<div class="mui-slider-item "><a class='gotoGoodsDetail' data-id="6" href="new-personal-details.html"><img src="../images/shop2_2.jpeg"></a></div>
					<div class="mui-slider-item "><a class='gotoGoodsDetail' data-id="1" href="new-personal-details.html"><img src="../images/shop3_2.jpeg"></a></div>
					<div class="mui-slider-item "><a class='gotoGoodsDetail' data-id="4" href="new-personal-details.html"><img src="../images/shop5_2.jpeg"></a></div>
					<div class="mui-slider-item mui-slider-item-duplicate "><a class='gotoGoodsDetail' data-id="6" href="new-personal-details.html"><img src="../images/shop2_2.jpeg"></a></div>
				</div>
				<div class="mui-slider-indicator ">
					<div class="mui-indicator mui-active "></div>
					<div class="mui-indicator "></div>
					<div class="mui-indicator "></div>
					<div class="mui-indicator "></div>
				</div>
			</div>
			<!--商品分类-->
			<div class="mui-content new-pattern-con">
		        <ul class="mui-table-view mui-grid-view mui-grid-12 pattern-con-icon">
		            <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3"><a class="gotoDetail1" href="#">
		                    <span class="mui-icon iconfont icon-tushu"></span>
		                    <div class="mui-media-body">影像图书</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3"><a class="gotoDetail2" href="#">
		                    <span class="mui-icon iconfont icon-jiaju"></span>
		                    <div class="mui-media-body">家居用品</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3"><a class="gotoDetail3" href="#">
		                    <span class="mui-icon iconfont icon-shuma"></span>
		                    <div class="mui-media-body">数码世界</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3"><a class="gotoDetail4" href="#">
		                    <span class="mui-icon iconfont icon-lipin"></span>
		                    <div class="mui-media-body">闲置礼品</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3"><a class="gotoDetail5" href="#">
		                    <span class="mui-icon iconfont icon-fuzhuang"></span>
		                    <div class="mui-media-body">服装包饰</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3"><a class="gotoDetail6" href="#">
		                    <span class="mui-icon iconfont icon-wentihuodong"></span>
		                    <div class="mui-media-body">文体用品</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3"><a class="gotoDetail7" href="#">
		                    <span class="mui-icon iconfont icon-weibiaoti-1"></span>
		                    <div class="mui-media-body">其他</div></a></li>
		            
		        </ul> 
			</div>
			
			
			<!--新款发售-->
			<div class="new-pattern">
				<!--<img class="w100" class="home-imgtit" src="../images/newPublish.png" alt="" />-->
				<ul class="pattern-list">
					<li class="mui-card-footer">
						<!-- <div class="mui-card">
							<a class='gotoGoodsDetail'  href="./new-personal-details.html">
								<div class="mui-card-header mui-card-media" style="height:40vw;">
									<img class="w100" src="../images/shop3.jpeg" /></div>
								<div class="mui-card-content">
									<div class="mui-card-content-inner">
										<p style="color: #333;">BEC中级真题和写作（七成新）</p>
									</div>
								</div>
								<div class="pattern-list__p">
									<p class="font-color-pink">￥<label>45</label></p>
									<p>库存<label>1</label></p>
								</div>
							</a>
						</div> -->
					</li>
					<!-- <li class="mui-card-footer">
						
					</li> -->
				</ul>
			</div>
		</div>
		

	
		<div class="nav-footer">
			<a class="icon-active" href="./index.html">
				<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label">首页</span>
			</a>
			<a href="new-classification.html">
				<span class="mui-icon mui-icon-list"></span>
				<span class="mui-tab-label">分类</span>
			</a>
			<a id="gotoShoppingCar">
				<span class="mui-icon mui-icon-extra mui-icon-extra-cart"></span>
				<span class="mui-tab-label">购物车</span>
			</a>
			<a href="new-mine.html">
				<span class="mui-icon mui-icon-contact"></span>
				<span class="mui-tab-label">个人中心</span>
			</a>
		</div>

		<script type="text/javascript" charset="utf-8">
			mui.init({
				swipeBack:true 
			});
			var slider = mui("#slider");
				slider.slider({
					interval: 2000//自动轮播周期，若为0则不自动播放，默认为0；
			});
			// AppData.getAllGoods().forEach(item => {
			// 	$('.mui-card-footer').append(`
			// 		<div class="mui-card">
			// 			<a class='gotoGoodsDetail' data-id="${item.id}" href="./new-personal-details.html">
			// 				<div class="mui-card-header mui-card-media" style="height:40vw;">
			// 					<img class="w100" src="${item.images[0]}" /></div>
			// 				<div class="mui-card-content">
			// 					<div class="mui-card-content-inner">
			// 						<p style="color: #333;">${item.title}</p>
			// 					</div>
			// 				</div>
			// 				<div class="pattern-list__p">
			// 					<p class="font-color-pink">￥<label>${item.price}</label></p>
			// 					<p>库存<label>${item.stock}</label></p>
			// 				</div>
			// 			</a>
			// 		</div>
			// 	`)
			// });
			// console.log(AppData.getGood('4')) 

			// 初始化数据
			function setData() {
				// let appData = JSON.stringify(AppData, function(key, val) {
				// 	if(typeof val === 'function') {
				// 		return val + ''
				// 	}
				// 	return val
				// })
				
				let appData = JSON.stringify(AppData)
				localStorage.setItem('$appData', appData)
				localStorage.setItem('$hasFlag', true)
			}
			$(function() {
				//判断是否是第一次进入页面，如果是则设置数据，反之则不设置
				if(localStorage.getItem('$hasFlag') === null) {
					console.log(1)
					setData()
				}
				JSON.parse(localStorage.getItem('$appData')).data.allGoods.forEach(item => {
				$('.mui-card-footer').append(`
					<div class="mui-card">
						<a class='gotoGoodsDetail' data-id="${item.id}" href="./new-personal-details.html">
							<div class="mui-card-header mui-card-media" style="height:40vw;">
								<img class="w100" src="${item.images[0]}" /></div>
							<div class="mui-card-content">
								<div class="mui-card-content-inner">
									<p style="color: #333;">${item.title}</p>
								</div>
							</div>
							<div class="pattern-list__p">
								<p class="font-color-pink">￥<label>${item.price}</label></p>
								<p>库存<label>${item.stock}</label></p>
							</div>
						</a>
					</div>
				`)
			});
			$(".gotoGoodsDetail").click(function() {
				// var goodsItem = {};
				let data = JSON.parse(localStorage.getItem('$appData'))
				// goodsItem.name = $(this).children("div").eq(1).children("div").children("p").text();
				// goodsItem.price = $(this).children("div").eq(2).children("p").eq(0).children("label").text();
				// goodsItem.repertory = $(this).children("div").eq(2).children("p").eq(1).children("label").text();
				// goodsItem.imgSrc = "../" + $(this).children("div").eq(0).children("img").attr("src");
				// console.log(this.dataset.id)
				let goodsItem = AppData.getGood(data.data, this.dataset.id)
				console.log(goodsItem)
				localStorage.setItem("$detail", JSON.stringify(goodsItem));
				// window.location.href = "new-personal-details.html";

			});
			})

		</script>
	</body>

</html>